<template>
	<div class="alterimformation">
		<Card class="card">
			<p slot="title" class="card-head">
				<span>文章编号：{{msg[0].id}}</span>
				<!-- <a class="closea" @click="closex"><Icon type="close"></Icon></a> -->
			</p>
			<p class="card-body">
				<i-form :model="formItem" :label-width="100">
					<Form-item label="大标题：">
						<Row :gutter="20">
							<i-col span="20">
								<i-input v-model="formItem.title" placeholder="请输入文章的大标题" :disabled="msg[0].isalter"></i-input>
							</i-col>
						</Row>
					</Form-item>
					<Form-item label="作者/来源：">
						<Row :gutter="20">
							<i-col span="10">
								<i-input v-model="formItem.author" placeholder="请输入文章的作者" :disabled="msg[0].isalter"></i-input>
							</i-col>
							<i-col span="10">
								<i-input v-model="formItem.source" placeholder="请输入文章的来源" :disabled="msg[0].isalter"></i-input>
							</i-col>
						</Row>
					</Form-item>
					<Form-item label="标签匹配：">
						<Row :gutter="20">
							<i-col span="20">
								<i-select v-model="formItem.tabs" filterable placeholder="请选择文章的匹配标签" :disabled="msg[0].isalter">
									<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
								</i-select>
							</i-col>
						</Row>
					</Form-item>
					<Form-item label="文章发布时间：">
						<Row :gutter="16">
							<i-col span="7">
								<Date-picker type="date" placeholder="选择日期" v-model="formItem.date" :disabled="msg[0].isalter"></Date-picker>
							</i-col>
							<i-col span="7">
								<Time-picker type="time" placeholder="选择时间" v-model="formItem.time" :disabled="msg[0].isalter"></Time-picker>
							</i-col>
						</Row>
					</Form-item>
					<Form-item label="正文：" class="quill">
						<Row>
							<i-col span="24">
								<quill-editor 
								class="quill-editor" 
								ref="myTextEditor"
								v-model="formItem.content"
								:config="editorOption"
								:disabled="msg[0].isalter">
							</quill-editor>
						</i-col>
					</Row>
				</Form-item>
				<Form-item>
					<i-button type="primary" @click="onSubmit()">更新并保存</i-button>
				</Form-item>
			</i-form>

		</p>
	</Card>
</div>
</template>
<script>
export default {
	name: 'alterimformation',
	data() {
		return {
			id: 'k123',
			// isalter:false,
			formItem: {
				title: this.msg[0].title,
				author:this.msg[0].author,
				source:this.msg[0].source,
				tabs:this.msg[0].tabs,
				date: this.msg[0].updata,
				time:this.msg[0].uptime,
				content:this.msg[0].content
			},
			cityList: [
			{
				value: '心理',
				label: '心理'
			}
			],
			editorOption: {

			}
		};
	},
	props:['msg'],
	methods: {
		onSubmit() {
			console.log(this.msg[0].id)
		},
		// closex(){
		// 	this.$emit('closeax',false)
		// }
	},
	creat() {
		
	}
}
</script>

<style>
.alterimformation{
	width: 100%;
	height: 100%
}
.alterimformation .card{
	height: 100%;
	box-shadow: 0 1px 6px rgba(0,0,0,.2);
	border-color: #eee;
	position: relative;
}
.alterimformation .card .ivu-card-body{
	overflow: auto;
	position: absolute;
	top: 57px;
	left: 0;
	right: 0;
	bottom: 0
}
.alterimformation .card .card-head{
	height: 26px;
	line-height: 26px;
	font-size: 16px
}
.alterimformation .card .card-body{
	padding-left: 20px;
	padding-right: 20px;
	height: 100%;
	padding-top: 20px;
	
}
.alterimformation .closea{
	float: right;
	font-size: 25px;
	padding-right: 10px
}
.quill{
	height: 430px
}
.quill-editor{
	height: 350px
}
</style>